<template>
    <h3>FormView</h3>
    <div>
        <vxe-form :data="formData1">
            <vxe-form-item title="名称" field="name" :item-render="{}">
                <template #default="{ data }">
                    <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
                </template>
            </vxe-form-item>
            <vxe-form-item title="项目类型" field="Project type" :item-render="{}">
                <template #default="{ data }">
                    <!-- <div hidden>{{ formatProjectType(data.attr3) }}</div> -->
                    <vxe-select v-model="data.attr3" clearable transfer @change="ptypeChangeEvent(data)">
                        <vxe-option v-for="item in ptypeList" :key="item.value" :value="item.value"
                            :label="item.label"></vxe-option>
                    </vxe-select>
                </template>
            </vxe-form-item>
            <vxe-form-item title="项目名称" field="PProject name" :item-render="{}">
                <template #default="{ data }">
                    <vxe-select v-model="data.attr4" clearable transfer>
                        <vxe-option v-for="item in pnameList" :key="item.value" :value="item.value"
                            :label="item.label"></vxe-option>
                    </vxe-select>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template #default>
                    <vxe-button type="submit" status="primary" @click="pointHeadler" content="默认尺寸">{{ guid
                        }}</vxe-button>
                </template>
            </vxe-form-item>
        </vxe-form>

        <vxe-form :data="formData2" size="medium">
            <vxe-form-item title="名称" field="name" :item-render="{}">
                <template #default="{ data }">
                    <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
                </template>
            </vxe-form-item>
            <vxe-form-item title="性别" field="sex" :item-render="{}">
                <template #default="{ data }">
                    <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
                        <vxe-option value="1" label="女"></vxe-option>
                        <vxe-option value="2" label="男"></vxe-option>
                    </vxe-select>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template #default>
                    <vxe-button type="submit" status="primary" content="中等尺寸"></vxe-button>
                </template>
            </vxe-form-item>
        </vxe-form>

        <vxe-form :data="formData3" size="small">
            <vxe-form-item title="名称" field="name" :item-render="{}">
                <template #default="{ data }">
                    <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
                </template>
            </vxe-form-item>
            <vxe-form-item title="性别" field="sex" :item-render="{}">
                <template #default="{ data }">
                    <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
                        <vxe-option value="1" label="女"></vxe-option>
                        <vxe-option value="2" label="男"></vxe-option>
                    </vxe-select>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template #default>
                    <vxe-button type="submit" status="primary" content="小型尺寸"></vxe-button>
                </template>
            </vxe-form-item>
        </vxe-form>

        <vxe-form :data="formData4" size="mini">
            <vxe-form-item title="名称" field="name" :item-render="{}">
                <template #default="{ data }">
                    <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
                </template>
            </vxe-form-item>
            <vxe-form-item title="性别" field="sex" :item-render="{}">
                <template #default="{ data }">
                    <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
                        <vxe-option value="1" label="女"></vxe-option>
                        <vxe-option value="2" label="男"></vxe-option>
                    </vxe-select>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template #default>
                    <vxe-button type="submit" status="primary" content="超小尺寸"></vxe-button>
                </template>
            </vxe-form-item>
        </vxe-form>
    </div>
</template>
<script>
import XEUtils from 'xe-utils'
export default {
    data() {
        return {
            guid: "",
            ptypeList: [
                { label: '项目1', value: '1' },
                { label: '项目2', value: '2' },
                { label: '项目3', value: '3' }
            ],
            pnameList: [],
            cachePnameList: [],
            formData1: {
                name: '',
                sex: '0',
                attr3: '',
                attr4: '',
            },
            formData2: {
                name: '',
                sex: '0'
            },
            formData3: {
                name: '',
                sex: '1'
            },
            formData4: {
                name: '',
                sex: '1'
            }
        }
    },
    methods: {
        formatProjectType(value) {
            const item = this.ptypeList.find(item => item.value === value)
            return item ? item.label : value
        },
        insertEvent() {
            const $table = this.$refs.xTable
            const record = {}
            $table.insert(record)
        },
        // 格式化显示名称
        formatPanmeLabel({ cellValue, row }) {
            let ptype = row.attr3
            let ptypeItem = this.cachePnameList.find(item => item.ptype === ptype)
            if (ptypeItem && ptypeItem.pnameList) {
                let pnameItem = ptypeItem.pnameList.find(item => item.value === cellValue)
                if (pnameItem) {
                    return pnameItem.label
                }
            }
            return ''
        },
        // 更新级联选项列表
        updatePnameList(data) {
            console.log(data);
            let ptype = data.attr3
            let pnameList = []
            if (ptype) {
                let item = this.cachePnameList.find(item => item.ptype === ptype)
                if (item) {
                    pnameList = item.pnameList
                } else {
                    // 模拟后台数据
                    Array.from(new Array(XEUtils.random(3, 8))).forEach((item, index) => {
                        pnameList.push({
                            label: `${ptype}-名称${index}`,
                            value: `${ptype}_${index}`
                        })
                    })
                    this.cachePnameList.push({ ptype, pnameList })
                }
            }
            this.pnameList = pnameList
        },
        ptypeChangeEvent(data) {
            // 类型切换时更新级联的下拉数据
            data.attr4 = ''
            this.updatePnameList(data)
        },
        editActivedEvent(data) {
            this.updatePnameList(data)
        },
        PointInPoly(pt, poly) {
            for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
                ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
                    && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
                    && (c = !c);
            return c;
        },

        pointHeadler() {
            var point = { x: 0, y: 0 };
            var points = [{ x: 0, y: 0 }, { x: 0, y: 6 }, { x: 6, y: 6 }, { x: 0, y: 6 }, { x: 0, y: 0 }]
            var isExits = this.isInPolygon(point, points);
            console.log("isExits", isExits);
        },

    }
}
</script>
<style></style>